<template>
  <div>
    <div class="header">
      <div class="backhome">
        <router-link to="/">返回首页</router-link>
      </div>
    </div>
    <ul>
      <li v-for="item of stationList" :key="item.id" @click="goto(item.name)">
        <h3>{{ item.name }}</h3>
        <p>首发站：{{ item.start_stop }}</p>
        <p>终点站：{{ item.end_stop }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'StationSearch',
  data () {
    return {
      lineName: '',
      stationList: []
    }
  },
  mounted () {
    this.lineName = this.$route.query.lineName
    this.initStationSearch()
  },
  methods: {
    initStationSearch () {
      const that = this
      AMap.plugin('AMap.StationSearch', () => {
        const stationSearch = new AMap.StationSearch({
          city: '桂林',
          pageSize: 1
        })
        stationSearch.search(that.lineName, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            that.stationList = result.stationInfo[0].buslines
          } else {
            that.stationList = []
          }
        })
      })
    },
    goto (lineName) {
      this.$router.push({
        path: '/LineSearch',
        query: { lineName }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .header
    height: 40px
    background-color: #0075ff
    padding: 10px 20px
    .backhome
      font-size: 15px
      a
        color: #fff
  ul
    padding-left: 20px
</style>


